<template>
  <view class="splash-container">
    <!-- 视频组件 -->
    <video
      id="splashVideo"
      class="fullscreen-video"
      :src="videoPath"
      autoplay
      muted
      :controls="false"
      :show-play-btn="false"
      :show-progress="false"
      :show-fullscreen-btn="false"
      :show-center-play-btn="false"
      @ended="handleVideoEnd"
      @error="handleVideoError"
    ></video>

    <!-- 加载提示 -->
    <view v-if="loading" class="loading-text">加载中...</view>
    
    <!-- 如果视频无法自动播放，提供点击播放选项 -->
    <view v-if="showPlayButton" class="play-button" @click="playVideo">
      <text class="play-text">点击播放</text>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';

// 响应式数据
const videoPath = ref('/static/splash-video.mp4');
const loading = ref(true);
const showPlayButton = ref(false);
let videoContext = null;

// 生命周期：页面准备就绪
onMounted(() => {
  initVideo();
  
  // 设置超时，如果视频在5秒内未开始播放，显示播放按钮
  setTimeout(() => {
    if (loading.value) {
      showPlayButton.value = true;
    }
  }, 5000);
});

// 初始化视频
const initVideo = () => {
  videoContext = uni.createVideoContext('splashVideo');
  
  // 手动触发播放（解决部分平台限制）
  setTimeout(() => {
    playVideo();
  }, 500);
};

// 播放视频
const playVideo = () => {
  try {
    videoContext.play();
    loading.value = false; // 关闭加载提示
    showPlayButton.value = false; // 隐藏播放按钮
  } catch (error) {
    console.error('播放视频出错:', error);
    showPlayButton.value = true;
  }
};

// 视频播放结束
const handleVideoEnd = () => {
  const isLoggedIn = uni.getStorageSync('isLoggedIn')
  console.log('登录状态:', isLoggedIn)
  if (isLoggedIn) {
    // 已登录，直接进入首页
    // 不显示加载提示，避免重复加载
    
    // 使用switchTab导航到tabBar页面
    uni.switchTab({
      url: '/pages/home/index',
      success: () => {
        console.log('已登录，跳转到首页成功')
      },
      fail: (err) => {
        console.error('已登录，跳转到首页失败', err)
        // 失败时回退到未登录状态的处理
        fallbackNavigation(isLoggedIn)
      }
    })
  } else {
    // 非首次启动且未登录，进入登录选择页
    uni.redirectTo({
      url: '/pages/index',
      success: () => {
        console.log('未登录，跳转到登录选择页成功')
      },
      fail: (err) => {
        console.error('未登录，跳转到登录选择页失败', err)
        fallbackNavigation(false)
      }
    })
  }
};

// 视频加载失败
const handleVideoError = (err) => {
  console.error('视频加载失败:', err);
  // 失败后直接跳转到登录选择页
  uni.redirectTo({ 
    url: '/pages/index',
    success: () => {
      console.log('视频加载失败，跳转到登录选择页成功')
    },
    fail: (err) => {
      console.error('视频加载失败，跳转到登录选择页失败', err)
      // 失败时尝试使用reLaunch
      uni.reLaunch({ url: '/pages/index' })
    }
  });
};
</script>

<style scoped>
.splash-container
{
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;

    width: 100vw;
    height: 100vh;

    background: #000; /* 视频加载前的背景色 */
}

.fullscreen-video
{
    width: 100%;
    height: 100%;

    object-fit: cover; /* 视频填充模式 */
}

.loading-text
{
    font-size: 14px;

    position: absolute;
    bottom: 60px;

    width: 100%;

    text-align: center;

    color: #fff;
}

.play-button
{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    width: 160rpx;
    height: 160rpx;
    
    display: flex;
    align-items: center;
    justify-content: center;
    
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    
    cursor: pointer;
}

.play-text
{
    color: #fff;
    font-size: 28rpx;
}
</style>